<template>
  <div class="g-layout-bottom">
    <div class="OnlineUserCount" @click="goUserOnLine()">
      <svg class="icon icon-header" aria-hidden="true">
        <use xlink:href="#gctyonghu1"></use>
      </svg>
      {{ l('OnlineUserCount') }}：
      <span class="highLight" v-if="!loading">{{ onlineUserCount }} </span>
    </div>
    <div class="left-box">
      {{ _moment(nowTime) }} Copyright {{ _moment(nowTime, 'yyyy') }} Foundation
      {{ l('SyStemCreatedBy') }}
    </div>
    <div class="right-box">
      <div class="right-label" v-if="type">{{ l('SyStemStatus') }}:</div>
      <div class="right-content">
        <div class="g-notification-notice" :class="type || ''">
          <div
            class="g-notification-notice-content"
            :class="{ 'ant-notification-notice-with-icon': type !== 'blank' }"
          >
            <div
              :class="{ 'ant-notification-notice-with-icon': type !== 'blank' }"
              style="display: flex; align-items: center"
            >
              <!-- 消息类型 -->
              <div v-if="type" style="margin-right: 10px; line-height: initial">
                <check-circle-outlined style="font-size: 24px" v-if="type == 'success'" />
                <info-circle-outlined style="font-size: 24px" v-if="type == 'info'" />
                <exclamation-circle-outlined style="font-size: 24px" v-if="type == 'warning'" />
                <close-circle-outlined style="font-size: 24px" v-if="type == 'error'" />
              </div>
              <div style="min-width: 200px; max-width: 1000px">
                <div class="g-notification-notice-message ellsText" v-html="title"></div>
                <a-tooltip>
                  <template #title>{{ content }}</template>
                  <div class="g-notification-notice-description ellsText" v-html="content"></div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base/index';
  import {
    CheckCircleOutlined,
    InfoCircleOutlined,
    CloseCircleOutlined,
    UserOutlined,
    ExclamationCircleOutlined,
  } from '@ant-design/icons-vue';
  import { UserServiceProxy } from '/@/shared/service-proxies';

  export default {
    name: 'g-layout-bottom',
    mixins: [AppComponentBase],
    components: {
      CheckCircleOutlined,
      InfoCircleOutlined,
      CloseCircleOutlined,
      UserOutlined,
      ExclamationCircleOutlined,
    },
    data() {
      return {
        nowTime: new Date(),
        type: '',
        title: '',
        content: '',
        options: {},
        userSer: new UserServiceProxy(),
        onlineUserCount: 0, // 当前在线用户数
        timeSetInterval: setInterval(() => {}, 0),
        onlineSetInterval: setInterval(() => {}, 0),
        subChangeMsg: (event: any) => {},
      };
    },
    created() {
      this.getOnlineUserCount();
      this.nowTime = new Date();
      this.timeSetInterval = setInterval(() => {
        this.nowTime = new Date();
      }, 1000) as any;
      this.onlineSetInterval = setInterval(() => {
        this.getOnlineUserCount();
      }, 1000 * 60);
      this.subChangeMsg = (eventArgs) => {
        this.changeMsg(eventArgs.type, eventArgs.message, eventArgs.title, eventArgs.options);
      };
      abp.event.on('httpRequestSuccess', this.subChangeMsg);
    },
    unmounted() {
      /** 销毁定时器 */
      clearInterval(this.timeSetInterval as any);
      clearInterval(this.onlineSetInterval as any);

      abp.event.off('httpRequestSuccess', this.subChangeMsg);
    },
    methods: {
      /**跳转到在线用户列表 */
      goUserOnLine() {
        if (this.isGranted('Pages.Administration.Users.Online')) {
          setTimeout(() => {
            this.$router.push({
              path: '/system2/user-online-news',
            });
          }, 300);
        }
      },
      /** 获取在线人数 */
      getOnlineUserCount(): void {
        this.loading = true;
        this.userSer
          .getOnlineUserCount()
          .then((num) => {
            if (num) {
              this.onlineUserCount = num;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      },
      changeMsg(type: string, content: string, title: string, options?: any): void {
        this.type = type.toLowerCase();
        this.title = this.l(type);
        this.content = content ?? title;
        this.options = options;
      },
    },
  };
</script>

<style lang="less" scoped>
  .right-box {
    display: flex;
    align-items: center;
  }
  .right-content {
    flex: 1;
  }

  .g-notification-notice {
    position: relative;
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    padding-left: 24px;
  }
  .g-notification-notice-icon {
    position: absolute;
    font-size: 28px;
    top: 10px;
    left: 10px;
  }
  .g-notification-notice.success {
    color: #06c786;
  }
  .g-notification-notice.error {
    color: #ff1d1d;
  }
  .g-notification-notice.warning {
    color: #ffb92e;
  }
  .g-notification-notice-message {
    font-size: 14px;
    line-height: 22px;
  }
  .g-notification-notice-description {
    font-size: 14px;
    line-height: 24px;
  }
  .highLight {
    color: #1890ff;
  }
  .OnlineUserCount {
    height: 20px;
    padding-left: 15px;
    width: 210px;
    cursor: pointer;
    border-right: 1px solid #ccc;
  }
</style>
